<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点赞示例</title>
    <script src="../js/jquery-2.1.1.min.js"></script>
    <style>
        .container{
            padding:50px;
            border:1px solid #dddddd;
        }
        .item{
            position:relative;
            width:80px;
        }
        .count{
            color:greenyellow;
        }
    </style>

<body>
    <div class="container">
        <div class="item">
            <span>赞</span>
            <span class="count">0</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
            <span class="count">0</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
            <span class="count">0</span>
        </div>
    </div>
    <script>
        $('.item').click(function(){
            addFavor(this);
            var count = parseInt($(this).find('.count').text());
            count +=1;
            $(this).find('.count').text(count);
        })
        function addFavor(item){
            //dom对象
            var fontSize=15;
            var top = -5;
            var right = 30;
            var opacity =1;
            var tag = document.createElement('span');

            $(tag).text('+1');
            $(tag).css('color','red');
            $(tag).css('position','absolute');
            $(tag).css('top',top +'px');
            $(tag).css('right',right +'px');
            $(tag).css('fontSize',fontSize+'px');
            $(tag).css('opacity',opacity);
            $(item).append(tag);

            var obj = setInterval(function(){
                fontSize = fontSize + 5;
                top -=5;
                right -=8;
                opacity -=0.1;
                $(tag).css('top',top +'px');
                $(tag).css('right',right +'px');
                $(tag).css('fontSize',fontSize+'px');
                $(tag).css('opacity',opacity);

                if(opacity < 0){
                    clearInterval(obj);
                    $(tag).remove();
                }

            },100);
        }

    </script>
</body>
</html>